<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增课程' : '编辑课程'" :close-on-click-modal="false" width="500px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="form.courseName" placeholder="课程名称" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="课程类目" prop="categoryId">
        <el-cascader v-model="form.categoryId" :options="categories"/>
      </el-form-item>
      <el-form-item label="收费方式">
        <el-radio-group v-model="form.chargeMethod">
          <el-radio :label="1">按课时</el-radio>
          <el-radio :label="2">按学期</el-radio>
          <el-radio :label="3">按月</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="课程单价">
        <el-input v-model="form.price" placeholder="课程单价（元）"/>
      </el-form-item>
      <el-form-item label="课时时长">
        <el-input v-model="form.period" placeholder="课时时长（分钟）"/>
      </el-form-item>
      <el-form-item label="课程类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">一对一</el-radio>
          <el-radio :label="2">小组课</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click.native="addSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listCategory, addCourse, updateCourse } from '@/api/course'
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      category: null,
      categories: [],
      form: {
        id: null,
        courseName: '',
        categoryId: null,
        chargeMethod: 1,
        price: null,
        period: null,
        type: 1,
        remark: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    addSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.categoryId.length > 0) {
            this.form.categoryId = this.form.categoryId[this.form.categoryId.length - 1]
          }
          const para = Object.assign({}, this.form)
          this.addLoading = true
          if (this.isAdd) {
            this.doAdd(para)
          } else {
            this.doEdit(para)
          }
        }
      })
    },
    doAdd(para) {
      addCourse(para).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加课程成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.$parent.init()
      })
    },
    doEdit(para) {
      updateCourse(para).then(res => {
        this.resetForm()
        this.$notify({
          title: '更新课程成功',
          type: 'success',
          duration: 2500
        })
        this.$parent.init()
      }).finally(() => {
        this.loading = false
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: null,
        courseName: '',
        categoryId: null,
        chargeMethod: 1,
        price: null,
        period: null,
        type: 1,
        remark: ''
      }
    },
    listCategory() {
      listCategory().then(res => {
        this.categories = res.data
      })
    }
  }
}
</script>

